<template>
	<a-button
		type="primary"
		@click="goBack"
	>
		<LeftOutlined />
		返回
	</a-button>
	<a-descriptions
		title="接口信息"
		layout="vertical"
		bordered
		style="padding: var(--gap-sm)"
	>
		<a-descriptions-item label="接口名">{{ interfaceInformation.name }}</a-descriptions-item>
		<a-descriptions-item label="接口描述">{{ interfaceInformation.description }}</a-descriptions-item>
		<a-descriptions-item label="接口地址">
			<a-tag color="blue">{{ interfaceInformation.method }}</a-tag>
			{{ interfaceInformation.url }}
		</a-descriptions-item>
		<a-descriptions-item label="接口状态">
			<a-badge
				:status="interfaceInformation.isDelete ? 'error' : interfaceInformation.status ? 'success' : 'default'"
				:text="interfaceInformation.isDelete ? '已删除' : interfaceInformation.status ? '正常' : '已下线'"
			/>
		</a-descriptions-item>
		<a-descriptions-item label="创建时间">{{ interfaceInformation.createTime }}</a-descriptions-item>
		<a-descriptions-item label="更新时间">{{ interfaceInformation.updateTime }}</a-descriptions-item>
	</a-descriptions>
	<a-divider />
	<a-form
		:layout="formState.layout"
		:model="formState"
		v-bind="formItemLayout"
	>
		<a-button
			type="primary"
			@click="handleOpen(true)"
			>查看教程
		</a-button>
		<a-tour
			v-model:current="current"
			:open="open"
			:steps="steps"
			@close="handleOpen(false)"
		/>

		<a-form-item
			label="请求参数"
			ref="ref1"
		>
			<a-textarea
				v-model:value="formState.requestParams"
				placeholder="JSON 数据 如果是 GET 请求，那么将被转换为 query 参数"
				:rows="4"
			/>
		</a-form-item>
		<a-form-item :wrapper-col="buttonItemLayout.wrapperCol">
			<a-button
				type="primary"
				@click="invoke"
				ref="ref2"
				>Submit
			</a-button>
		</a-form-item>
	</a-form>

	<a-card
		ref="ref3"
		:loading="resultWaiting"
		title="查看结果"
		>{{ invokeResult }}</a-card
	>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import type { UnwrapRef } from 'vue';
import { computed, createVNode, onBeforeMount, reactive, ref } from 'vue';
import type { TourProps } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { LeftOutlined } from '@ant-design/icons-vue';
import api from '@/api';
import InterfaceInfo = API.InterfaceInfo;

interface FormState {
	requestParams: string;
}

const route = useRoute();
const router = useRouter();
const id = route.params.id;
const interfaceInformation = ref<InterfaceInfo>({});
const formState: UnwrapRef<FormState> = reactive({
	requestParams: '',
});
const formItemLayout = computed(() => {
	const { layout } = formState;
	return layout === 'horizontal'
		? {
				labelCol: { span: 4 },
				wrapperCol: { span: 14 },
			}
		: {};
});
const buttonItemLayout = computed(() => {
	const { layout } = formState;
	return layout === 'horizontal'
		? {
				wrapperCol: { span: 14, offset: 4 },
			}
		: {};
});
const open = ref<boolean>(false);
const resultWaiting = ref<boolean>(false);
const ref1 = ref(null);
const ref2 = ref(null);
const ref3 = ref(null);
const current = ref(0);
const steps: TourProps['steps'] = [
	{
		title: '定义调用参数',
		description: '需要使用 JSON 格式，这里的数据将自动转换为请求方法对应的格式',
		cover: createVNode('img', {
			alt: 'tour.png',
			src: 'https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png',
		}),
		target: () => ref1.value && ref1.value.$el,
	},
	{
		title: '提交调用请求',
		description: 'Save your changes.',
		target: () => ref2.value && ref2.value.$el,
	},
	{
		title: '查看调用结果',
		description: '你的调用结果会展示在这里',
		target: () => ref3.value && ref3.value.$el,
	},
];
const invokeResult = ref<string>('请先调用一次接口');
const handleOpen = (val: boolean): void => {
	open.value = val;
};
const invoke = () => {
	resultWaiting.value = true;
	api.interfaceInfoController
		.invokeInterface({
			id,
			userRequestParams: formState.requestParams,
		})
		.then(resposne => {
			invokeResult.value = resposne.data.data;
			resultWaiting.value = false;
		})
		.catch(err => {
			message.error(`调用失败:${err}`, 2);
			resultWaiting.value = false;
		});
};
const goBack = () => {
	router.go(-1);
};

onBeforeMount(() => {
	api.interfaceInfoController
		.getInterfaceInfoById({ id })
		.then(res => {
			interfaceInformation.value = res.data.data;
			message.success('成功', 2);
		})
		.catch(err => {
			message.error(`数据获取失败:${err}`, 2);
		});
});
</script>

<style scoped></style>
